Wijgrid provides support for hierarchical data binding, which allows you to display hierarchical grid of summary rows and detail rows using customized query. This type of binding has two or more tables connected in a parent-child relationship to form nested grids. Through hierarchical binding, you can display grid within a grid, along with each grid supporting basic functionalities, such as filtering, sorting, editing and grouping.
The image below shows the hierarchical grid with one of its rows expanded:
Key Properties
- data : Each grid must have a data source to represent the data hierarchy in Wijgrid. The data source for each detail grid is set using the data option.
| Script |
Copy Code |
$("#demo").wijgrid({
data: nwind.customers |
- detail: The detail option determines the detail grid settings in a grid, which is used as a template for populating detail grids in a hierarchical grid. We can use this option to set the following:
- dataKey: The dataKey option is used to identify a primary key for the wijgrid widget. It takes the name of fields from the connected database, as an array of strings. The primary key columns for each table in the datasource are added to the dataKey option of the respective parent table or child table.
| Script |
Copy Code |
columns: [
{ dataKey: "CompanyName", headerText: "Company name" }
] |
- masterDataKey: The masterDataKey option is used to set the relation between the parent and the child table. The value of the masterDataKey must be set to match the field specified in dataKey for the parent table.
- detailDataKey: The detailDataKey option is also used to set the relation between the child table and the parent table. It retrieves the data from the child table for the detail section. The field set as detailDataKey must be the foreign key of the child table in the corresponding relation and it must also be a primary key in child table so that it matches with the field set as the masterDataKey.
| Script |
Copy Code |
relation: [
{ masterDataKey: "CustomerID", detailDataKey: "CustomerID" }
] |
- pageSize: The pageSize option determines the number of rows to be displayed in the parent or child grid.
